<style>
  .card{box-shadow: none;}
  .order .o-counts {
    font-size: .6rem;
    color: #fff;
    background: #0894ec;
    flex-basis: 1.25rem;
    display: inline-block;
    height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
    padding: 0 .2rem;
  }
  .order .o-title {
    flex-basis: 80vw;
    padding: 0 .3rem;
  }
  .order .o-price {
    color: #c30;
  }
  .order .item-content {
    padding-left: 3vw;
    border-top: 1px solid #e7e7e7;
    border-bottom:1px solid #e7e7e7;
  }
  .state {
    width: 20%;
    float: left;

  }
  .state .s-name {
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    border: .2vw solid #ccc;
    color: #ccc;
    border-radius: 50%;
    font-size: .5rem;
    margin: 0 4.5vw;
    position: relative;
  }
  .state .s-name:before {
    content: '';
    position: absolute;
    width: 9vw;
    height: .2vw;
    top:5vw;
    left:-9vw;
    background: #ccc;
  }
  .state .s-name.success {
    border: .2vw solid #0894ec;
    color: #0894ec;
  }
  .state .s-name.success:before {
    background: #0894ec;
  }
  .state:first-child .s-name:before {
    height: 0;
    width: 0;
  }
  .state .s-time {
    font-size: .4rem;
    text-align: center;
    color: #888;
    padding: .2rem 0;
  }
  .order .card-detail {
    background: #eee;
    display: none;
    padding: .6rem 0 .3rem;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 3px 3px #eee inset;
  }
  .card-detail ul {margin-bottom: .6rem;}
    .card-detail li {margin: 0;}
  .order .item-subtitle {
    display: flex;
    justify-content: space-between;
  }

</style>

<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">订单</h1>
  </header>
  <div class="content">
    <div class="content-block" style="padding: 0;">
      <!--<p class="buttons-row">-->
        <!--<a href="#" class="button active">Button 1</a>-->
        <!--<a href="#" class="button">Button 2</a>-->
        <!--<a href="#" class="button">Button 3</a>-->
      <!--</p>-->

      <div class="card order" style="margin: 0;">
        <div class="card-content">
          <div class="list-block media-list">

            <div class="item-content">

              <div class="item-inner elip" style="border: none;padding-right: 3vw;">
                <div class="item-title-row">
                  <div class="item-title elip" style="width: 100%;display:flex;justify-content: space-between;margin-bottom: .5rem;">
                    <div class="o-counts">处理</div>
                    <div class="o-title elip">12345622222</div>
                    <div class="delete icon icon-remove"></div>
                  </div>
                </div>
                <div class="item-subtitle">
                  <div>共5件商品</div>
                  <div class="o-price">￥6666</div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="card-detail">
          <ul>
            <li class="row">
              <div class="col-50">
                <div class="elip">白金系列1段婴儿配方奶粉</div>
                <div style="font-size: .5rem;">900G</div>
              </div>
              <div class="col-25">x3</div>
              <div class="col-25">￥66</div>
            </li>
            <li class="row">
              <div class="col-50">
                <div class="elip">白金系列1段婴儿配方奶粉</div>
                <div style="font-size: .5rem;">900G</div>
              </div>
              <div class="col-25">x3</div>
              <div class="col-25">￥666</div>
            </li>
            <li class="row">
              <div class="col-50">
                <div class="elip">白金系列1段婴儿配方奶粉</div>
                <div style="font-size: .5rem;">900G</div>
              </div>
              <div class="col-25">x3</div>
              <div class="col-25">￥6666</div>
            </li>
          </ul>
          <div class="clearfix" style="padding: 0 3vw;">
            <div class="state">
              <div class="s-name success">下单</div>
              <div class="s-time">2011.11.11</div>
            </div>
            <div class="state">
              <div class="s-name success">处理</div>
              <div class="s-time">2011.11.22</div>
            </div>
            <div class="state">
              <div class="s-name">付款</div>
            </div>
            <div class="state">
              <div class="s-name">发货</div>
            </div>
            <div class="state">
              <div class="s-name">完成</div>
            </div>
          </div>
        </div>
      </div>





    </div>

  </div>
</div>

<script>
  $(function(){
    $(document).on('click','.order',function(){
      $(this).find('.card-detail').slideToggle();
    });
    $(document).on('click','.delete',function(e){
        e.stopPropagation();
        console.log('del');
    });
  });
</script>
